<div class="main_content queues monitoring white_design">
    <monitoring-tabs></monitoring-tabs>
    <div class="tab-content">
        <h2 i18n="@@diff_monitoring">Diff Monitoring</h2>
        <div class="filter_line" (keyup)="keyUp($event)">
            <div class="filter_block">
                <filter-generator [schema]="filterSchema" [model]="filterObject" (submit)="onSubmit($event)" (onChange)="onFormChange($event)" [filterTreeHeight]="3"></filter-generator>
                <div class="filter" *ngIf="statusValues">
                    <div class="filter_block auto_reloader">
                        <table>
                            <tr *ngFor="let status of Object.keys(statusValues)" [ngClass]="{'gray':statusValues[status]?.count == '0','red':statusValues[status]?.count=='!'}">
                                <td>{{status}}:</td>
                                <td *ngIf="!statusValues[status]?.loader">{{statusValues[status]?.count}}</td>
                                <td *ngIf="statusValues[status]?.loader"><i class="fa fa-circle-o-notch fa-spin dashboard_loader"></i></td>
                            </tr>
                        </table>

                        <div class="option_block">
                            <div class="interval_block">
                                <label i18n="@@interval">Interval:</label>
                                <input type="text" i18n-placeholder="@@placeholder.interval" placeholder="Interval" [(ngModel)]="interval">
                                <span>s</span>
                            </div>
                            <button class="btn-default submit" (click)="toggleAutoRefresh()">
                                <div class="spinnter_container">
                                    <span *ngIf="!timer.started" class="glyphicon glyphicon-refresh"></span>
                                    <mat-progress-spinner *ngIf="timer.started" mode="indeterminate" [diameter]="20" ></mat-progress-spinner>
                                </div>
                                <span *ngIf="!timer.started">{{timer.startText}}</span>
                                <span *ngIf="timer.started">{{timer.stopText}}</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="filter_line">
            <div class="filter single_block" [permission]="{id:'action-monitoring->diff_monitor-all_action',param:'visible'}">
                <div class="filter_block">
                    <div class="line">
                        <div (click)="downloadCsv()" class="w45percent csv_button"><span class="custom_icon csv_icon"></span><span class="text" i18n="@@download_csv">Download CSV</span></div>
                        <div (click)="uploadCsv()" class="w45percent csv_button"><span class="material-icons">file_upload</span><span class="text" i18n="@@upload_csv">Upload CSV</span></div>
                    </div>
                </div>
                <div class="filter_block">
                    <div class="line">
                        <mat-select [(ngModel)]="allAction" i18n-placeholder="@@placeholder.all_actions" placeholder="All actions" (selectionChange)="allActionChanged($event)" floatPlaceholder="never">
                            <mat-option value="{{actions.value}}" *ngFor="let actions of allActionsOptions">{{actions.label}}</mat-option>
                        </mat-select>
                        <div class="checkbox_button pull-left" [ngClass]="{'active':batchGrouped}"><mat-checkbox [(ngModel)]="batchGrouped" (ngModelChange)="tasks = []" i18n="@@batch_id_grouped">Batch ID grouped</mat-checkbox></div>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <div class="left_arrow arrow"  *ngIf="tasks && tasks.length && tasks.length > 0" [ngClass]="{'active':filterObject.offset > 0}" (click)="prev()"><span class="glyphicon glyphicon glyphicon-chevron-left"></span></div>
            <div class="right_arrow arrow" *ngIf="tasks && tasks.length && tasks.length > 0" [ngClass]="{'active':moreTasks}" (click)="next()"><span class="glyphicon glyphicon glyphicon-chevron-right"></span></div>
            <table-generator *ngIf="config && tasks && tasks.length && tasks.length > 0" [stringifyDetailAttributes]="true" [config]="config" [models]="tasks" (tableMouseEnter)="tableMouseEnter()" (tableMouseLeave)="tableMouseLeave()"></table-generator>
        </div>
    </div>
</div>